<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鲜花</title>

    <!-- 初始化样式 -->
    <link rel="stylesheet" href="css/reset.css">
    <!-- index样式 -->
    <link rel="stylesheet" href="css/index.css">
</head>

<body>

    <!-- 导航 -->
    <div class="head">
        <div class="head-c">
            <a class="logo" href="">
                <img src="img/logo.png" alt="">
            </a>

            <ul>
                <li>
                    <a href="">HOME</a>
                    <span class="line hode"></span>
                </li>
                <li>
                    <a href="">FLOWERS</a>
                    <span class="line"></span>
                </li>

                <li>
                    <a href="">PLANTS</a>
                    <span class="line"></span>
                </li>
                <li>
                    <a href="">ORDERS</a>
                    <span class="line"></span>
                </li>
                <li>
                    <a href=""><img src="img/search.png" alt=""></a>
                </li>
            </ul>
        </div>
    </div>

    <!-- bannner -->
    <div class="banner">
        <div class="banner-c">

            <div class="pointer">
                <a href=""></a>
                <a class="pr" href=""></a>
                <a href=""></a>
            </div>
        </div>
    </div>

    <!-- 内容区 -->
    <div class="main">
        <div class="main-c">

            <!-- 分类 -->
            <div class="content">

                <div class="con-nav">
                    <p>Home Decoration<br>
                        in Green</p>
                    <span>see all collection</span>
                    <div class="nav-img">
                        <img src="img/img2.png" alt="">
                    </div>
                </div>

                <div class="con-nav w">
                    <p>If You Were A Cactus<br>
                        In The Desert</p>
                    <span>see all collection</span>
                    <div class="nav-img">
                        <img src="img/img2.png" alt="">
                    </div>
                </div>

                <div class="con-nav">
                    <p>Valentine’s Day <br>
                        in China</p>
                    <span>see all collection</span>
                    <div class="nav-img">
                        <img src="img/img2.png" alt="">
                    </div>
                </div>
            </div>


            <ul>
                <li>
                    <a href="">all</a>
                    <span class="line"></span>
                </li>
                <li>
                    <a href="">fresh</a>
                    <span class="line"></span>
                </li>
                <li>
                    <a href="">dried</a>
                    <span class="line"></span>
                </li>
                <li>
                    <a href="">potted</a>
                    <span class="line"></span>
                </li>
                <li>
                    <a href="">decoration</a>
                    <span class="line"></span>
                </li>
            </ul>



            <!-- 产品展示 -->
            <div class="con-list">
                <div class="list-pic">
                    <img src="img/img2.png" alt="">
                    <div class="title">
                        <p>Myrtle Cactus</p>
                        <span>Potted</span>
                        <span class="money">$20.45</span>
                    </div>
                </div>

                <div class="list-pic">
                    <img src="img/img3.png" alt="">
                    <div class="title">
                        <p>Myrtle Cactus</p>
                        <span>Potted</span>
                        <span class="money">$20.45</span>
                    </div>
                </div>
                <div class="list-pic">
                    <img src="img/img4.png" alt="">
                    <div class="title">
                        <p>Myrtle Cactus</p>
                        <span>Potted</span>
                        <span class="money">$20.45</span>
                    </div>
                </div>
                <div class="list-pic pr0">
                    <img src="img/img2.png" alt="">
                    <div class="title">
                        <p>Myrtle Cactus</p>
                        <span>Potted</span>
                        <span class="money">$20.45</span>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- 关于 -->
    <div class="about">
        <div class="about-c">
            <div class="info">
                <p>About Us</p>
                <div class="desc">We publish announcement about us here, this shop so far has been about
                    what we likeand why we like it. In this brief final chapter, I turn to some implications of the
                    essent.
                    If you would like to know more about us I would
                    be happy to have short call with you.
                </div>
                <a href="">more</a>

            </div>

        </div>
    </div>

    <!-- 主题活动 -->
    <div class="topic">
        <div class="topic-c">
            <div class="topic-img">
                <img src="img/img2.png" alt="">
                <div class="mask">
                    <div class="title">Decoration</div>
                    <div class="desc">design your house</div>
                </div>
            </div>
            <div class="topic-img w">
                <img src="img/img3.png" alt="">
                <div class="mask">
                    <div class="title">Bouquet</div>
                    <div class="desc">bridal bouquet</div>
                </div>
            </div>
            <div class="topic-img">
                <img src="img/img4.png" alt="">
                <div class="mask">
                    <div class="title">Ornaments</div>
                    <div class="desc">goods of funiture</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 加入方式 -->
    <div class="join">
        <div class="join-c">
            <div>
                <div class="title">Join Our Newsletter</div>
                <input type="text" placeholder="Your Emails">

                <div class="send">Send</div>
                <div class="desc">In effect, we are saying thar if you want to join us, then you have to become one
                    of us.We bless each of you and look forward to those of you choosing to join us ahead.
                    Would you like to join us?</div>
            </div>
        </div>
    </div>

    <!-- 底部信息 -->
    <div class="foot">
        <div class="foot-c">
            <div class="foot-item">
                <dl>
                    <dt><img src="img/ins.png" alt=""></dt>
                    <dd>© 2015-2019 Leaf Shop.</dd>
                    <dd>Flower Family.</dd>
                    
                </dl>
                <dl>
                    <dt>Information</dt>
                    <dd>All products</dd>
                    <dd>All products</dd>
                    <dd>All products</dd>
                    <dd>All products</dd>
                </dl>
                <dl>
                    <dt>Information</dt>
                    <dd>All products</dd>
                    <dd>All products</dd>
                    <dd>All products</dd>
                    <dd>All products</dd>
                </dl>
                <dl>
                    <dt>Information</dt>
                    <dd>All products</dd>
                    <dd>All products</dd>
                    <dd>All products</dd>
                    <dd>All products</dd>
                </dl>
                <dl>
                    <dt>Information</dt>
                    <dd>All products</dd>
                    <dd>All products</dd>
                    <dd>All products</dd>
                    <dd>All products</dd>
                </dl>
                <dl>
                    <dt>Information</dt>
                    <dd>
                        <img class="img-mrg" src="img/FaceBook.png" alt="">
                        <img src="img/ins.png" alt="">
                    </dd>
                    
                    
                </dl>
            </div>
        </div>
    </div>

</body>

</html>